<template>
	<div class="registerWrap">
		<form>
			<h1>注册</h1>
			<div class="">
				<input type="text" @blur="checkUser" v-model="form.username"/>
				<p v-show="isExist" style="color: red;font-size: 12px;">该用户名已注册，请前往登录</p>
			</div>
			<div class="">
				<input type="text" v-model="form.password"/>
			</div>
			
			<div class="">
				<button type="button" @click="register" :disabled="isExist">注册</button>
			</div>
		</form>
	</div>
</template>

<script>
	// import network from '@/network'
	import { registerApi, checkUserApi } from '@/api/users.js'
	export default {
		name: 'register',
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				isExist: false
			}
		},
		methods:{
			async register(){
				// this.$router.push('/')
				// console.log(34, '==========')
				let res = await registerApi({
					data: this.form
				})
				console.log(res)
				alert(res.msg)
				if(res.code == '200'){
					this.$router.push('/login')
				}
			},
			async checkUser() {
				let res = await checkUserApi({
					params: {
						username: this.form.username
					}
				})
				if(res.code == '513'){
					this.isExist = true
				}else{
					this.isExist = false
				}
			}
		}
	}
</script>

<style>
</style>
